<template>
  <div>
    <div class="styleTop" style="background-color: #f6f6f6"   >
      <img :src="sellInfo.userAvatar" style=" width: 110px;height: 110px;border-radius: 50%; margin-left: 20px;margin-top: 10px;" alt="" srcset="">
      <span style="fontWeight: bold; display: inline-block;vertical-align: top; margin-top: 15px;margin-left: 15px ;font-size: 30px">{{ sellInfo.userName }}</span>
      <img src="../img/cce88f2ace482a802615584b845f7a66.png" style=" height:30px; width:100px;display:inline-block;vertical-align: top; margin-top: 20px;margin-left: 15px">
      <img src="../img/img.png" style=" height:30px; width:100px;display:inline-block;vertical-align: top; margin-top: 20px;margin-left: 15px">
    <span   style=" position: absolute; top:170px; left: 300px; fontWeight: bold; font-size: 30px">{{sellInfo.address}} | 联系方式：QQ{{sellInfo.userEmail}}</span>

      </div>
    <div class="nav-category">

      <div class="right">
                <span class="bargain">
                    <span :style="{
                        color: bargainSelectedItem.name === bargain.name ? 'rgb(51,51,51)' : '',
                        backgroundColor: bargainSelectedItem.name === bargain.name ? 'rgb(254, 223, 70)' : ''
                    }" @click="bargainSelected(bargain)" v-for="(bargain, index) in bargainStatus" :key="index">{{
                        bargain.name }}</span>
                </span>
        <el-date-picker style="width: 216px;margin-right: 5px;" @change="fetchFreshData" size="small"
                        v-model="searchTime" type="daterange" range-separator="至" start-placeholder="发布开始"
                        end-placeholder="发布结束">
        </el-date-picker>
      </div>
    </div>
    <div class="product-list">
      <el-row v-if="productList.length === 0">
        <el-empty description="暂无商品信息"></el-empty>
      </el-row>
      <el-row v-else>
        <el-col  @click.native="route(product)" :span="6" v-for="(product, index) in productList" :key="index">
          <div class="item-product">
            <div class="cover">
              <img :src="coverListParse(product)" alt="" srcset="">
            </div>
            <div style="display: flex;justify-content: left;gap: 4px;align-items: center;">
              <span class="bargain-hover">{{ product.isBargain ? '支持砍价' : '不支持砍价' }}</span>
              <span class="title">
                                {{ product.name }}
                            </span>
            </div>
            <div style="padding-block: 15px;">
              <span class="decimel-symbol">¥</span>
              <span class="price">{{ product.price }}</span>
              <span class="love">{{ product.likeNumber }}人想要</span>
            </div>
            <div class="info">
              <img :src="product.userAvatar" alt="" srcset="">
              <span>{{ product.userName }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Product',
  data() {
    return {
      categoryList: [], // 存储的商品类别数组
      isUseCategoryList: [], // 存储的启用的类别数组
      categorySelectedItem: {},
      productQueryDto: {}, // 商品查询条件类
      productList: [],// 存储后端返回的商品数据列表
      bargainSelectedItem: {},
      searchTime: [],
      bargainStatus: [{ isBargain: null, name: '全部' }, { isBargain: true, name: '支持砍价' }, { isBargain: false, name: '不支持砍价' }],
      sellInfo:[],
      sellId:null
    };
  },
  created() {
    this.fetchFreshData();
    this.fetchCategoryList();
    // 页面加载时，默认不启用砍价查询条件
    this.bargainSelected(this.bargainStatus[0]);
    this.sell()
  },
  methods: {
    route(product) {
      // 跳转商品详情
      this.$router.push('/product-detail?productId=' + product.id);
    },
    coverListParse(product) {
      if (product.coverList === null) {
        return;
      }
      const newCoverList = product.coverList.split(',');
      return newCoverList[0];
    },
    /**
     * 商品砍价选中事件
     * @param {*} bargain
     */
    bargainSelected(bargain) {
      this.bargainSelectedItem = bargain;
      this.productQueryDto.isBargain = bargain.isBargain;
      this.fetchFreshData();
    },
    /**
     * 查询商品数据
     */
    async fetchFreshData() {
      let startTime = null;
      let endTime = null;
      if (this.searchTime != null && this.searchTime.length === 2) {
        const [startDate, endDate] = await Promise.all(this.searchTime.map(date => date.toISOString()));
        startTime = `${startDate.split('T')[0]}T00:00:00`;
        endTime = `${endDate.split('T')[0]}T23:59:59`;
      }
      // this.productQueryDto.current = this.currentPage;
      // this.productQueryDto.size = this.pageSize;
      this.productQueryDto.startTime = startTime;
      this.productQueryDto.endTime = endTime;
      const sellInfo = sessionStorage.getItem("sellInfo");
      this.productQueryDto.userId = JSON.parse(sellInfo);
      this.$axios.post('/product/query', this.productQueryDto).then(res => {
        const { data } = res; // 解构
        if (data.code === 200) {
          this.productList = data.data;
        }
      }).catch(error => {
        console.log("商品查询异常：", error);
      })
    },
    /**
     * 商品类别选中事件
     * @param {*} category
     */
    categorySelected(category) {
      this.categorySelectedItem = category;
      this.productQueryDto.categoryId = category.id;
      // 查询对应的商品分类下面的商品数据
      this.fetchFreshData();
    },
    /**
     * 加载商品类别数据
     */
    fetchCategoryList() {
      this.$axios.post('/category/query', {}).then(res => {
        const { data } = res; // 解构
        if (data.code === 200) {
          this.categoryList = data.data;
          this.isUseCategoryList = data.data.filter(category => category.isUse);
          this.isUseCategoryList.unshift({ id: null, name: '猜你喜欢' });
          this.categorySelected(this.isUseCategoryList[0]);
        }
      }).catch(error => {
        console.log("商品类别查询异常：", error);
      })
    },
    sell(){  //卖家的基本信息
      const sellInfo = sessionStorage.getItem("sellInfo");
      this.sellId = JSON.parse(sellInfo);
      this.$axios.get(`/user/getById/${this.sellId}`).then(res => {
        const { data } = res;
        if (data.code === 200) {
          this.sellInfo = data.data;
          this.allTime(this.sellinfo.createTime);
          sessionStorage.setItem('sellInfo', JSON.stringify(this.sellinfo.id));

        }
      }).catch(error => {
        console.log("卖家查询异常：", error);
      })
    },
  }
};
</script>
<style scoped lang="scss">
.cover {
  img {
    width: 100%;
    height: 240px;
    border-radius: 10px;
  }
}

.bargain-hover {
  font-size: 12px;
  font-weight: 800;
  background-color: rgb(255, 230, 15);
  color: rgb(51, 51, 51);
  border-radius: 2px;
  padding: 2px 6px;
}

.title {
  font-size: 20px;
  color: #1f1f1f;
}

.decimel-symbol {
  font-size: 14px;
  color: #ff4f24;
  font-weight: 800;
}

.price {
  font-size: 24px;
  color: #ff4f24;
  font-weight: 800;
  margin-right: 6px;
}

.love {
  font-size: 14px;
  color: #999;
}

.info {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 4px;

  img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }

  span {
    font-size: 14px;
    color: #999;
  }
}

.bargain {
  display: inline-block;
  font-size: 12px;
  background-color: rgb(246, 246, 246);
  line-height: 24px;
  padding-inline: 10px;
  padding-block: 4px;
  margin-right: 5px;
  border-radius: 5px;
  cursor: pointer;

  span {
    display: inline-block;
    padding-inline: 10px;
    border-radius: 5px;
  }
}

.product-list {
  padding-block: 20px;

  .item-product {
    padding: 10px 10px 16px 10px;
    box-sizing: border-box;
    border-radius: 15px;
    transition: all .5s;
    cursor: pointer;

  }

  .item-product:hover {
    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);

  }
}

.nav-category {
  display: flex;
  justify-content: space-between;

  .left {
    display: flex;
    justify-content: left;
    gap: 6px;

    span {
      display: inline-block;
      background-color: rgb(246, 246, 246);
      padding: 6px 22px;
      cursor: pointer;
      border-radius: 15px;

    }

    span:hover {
      background-color: rgb(242, 242, 242);
    }
  }


}
.styleTop{

  height: 140px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 2px solid rgb(243, 242, 242);
}
</style>